Adaptive layouts allow a Flutter application to provide an appropriate user interface across different screen sizes, window sizes, orientations, and form factors. Instead of designing one fixed layout for a phone, adaptive Flutter applications change their structure based on the space actually available to the application.
Flutter documentation distinguishes responsive design as fitting UI into available space and adaptive design as selecting an appropriate usable UI for that space. In practice, modern Flutter applications commonly use both approaches together. Flutter Adaptive and Responsive Design Documentation
An adaptive layout is a UI layout that changes its structure according to the available space. For example, the same application can display:
The important concept is that layout decisions should generally be based on the available window or widget space rather than simply checking whether the device is a phone, tablet, or desktop.
Phone:
+----------------------+
| App Bar |
+----------------------+
| |
| Main Content |
| |
+----------------------+
| Home | Profile |
+----------------------+
Tablet/Desktop:
+---------+----------------------+
| Sidebar | Main Content |
| | |
| | |
+---------+----------------------+
| Responsive Design | Adaptive Design |
|---|---|
| Adjusts UI to available space. | Selects an appropriate UI structure for the available space. |
| Changes sizes, spacing, wrapping, and positioning. | Can change navigation, information architecture, and major layout structure. |
| Example: cards wrap into fewer columns. | Example: bottom navigation changes to a navigation rail. |
| Focuses on fitting content. | Focuses on usability in the available space. |
In real Flutter applications, responsive and adaptive techniques are often combined.
Flutter's recommended general approach can be understood in three steps:
Flutter documentation describes MediaQuery and LayoutBuilder as important tools for measuring available space. Flutter General Approach to Adaptive Apps
MediaQuery can be used when the layout decision depends on the application's entire window.
import 'package:flutter/material.dart';
class AdaptiveHomePage extends StatelessWidget {
const AdaptiveHomePage({super.key});
@override
Widget build(BuildContext context) {
final size = MediaQuery.sizeOf(context);
if (size.width < 600) {
return const MobileLayout();
}
return const LargeScreenLayout();
}
}
class MobileLayout extends StatelessWidget {
const MobileLayout({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text('Mobile Layout'),
),
);
}
}
class LargeScreenLayout extends StatelessWidget {
const LargeScreenLayout({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text('Large Screen Layout'),
),
);
}
}
MediaQuery.sizeOf(context) provides the current size of the application's window in logical pixels. It is useful when the adaptive decision concerns the whole application window.
LayoutBuilder is particularly useful when a widget should adapt according to the space provided by its parent.
LayoutBuilder(
builder: (context, constraints) {
return YourWidget();
},
)The constraints parameter is a BoxConstraints object. It provides values such as:
minWidthmaxWidthminHeightmaxHeightLayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const Text('Small Layout');
}
return const Text('Large Layout');
},
)
Unlike MediaQuery, which measures the application window, LayoutBuilder measures the constraints available to the widget from its parent. Learn more about LayoutBuilder
| Feature | MediaQuery | LayoutBuilder |
|---|---|---|
| Measures | Application window | Parent-provided constraints |
| Returns | Size and other environmental information | BoxConstraints |
| Best for | Whole-screen decisions | Local widget decisions |
| Example | Choose application navigation | Choose card layout inside a panel |
MediaQuery.sizeOf(context) when you need the size of the application's window.LayoutBuilder when you need to know how much space a particular widget receives.A breakpoint is a width at which your application changes its layout structure.
For example:
const double mobileBreakpoint = 600;
const double tabletBreakpoint = 900;You can then create three layouts:
These values are examples, not universal device rules. Breakpoints should be selected according to the amount of space your UI actually needs. Flutter's adaptive-layout tutorial uses 600 logical pixels as a common example for distinguishing a smaller layout from a larger layout. Flutter Adaptive Layout Tutorial
import 'package:flutter/material.dart';
class AdaptivePage extends StatelessWidget {
const AdaptivePage({super.key});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileLayout();
} else if (constraints.maxWidth < 900) {
return const TabletLayout();
} else {
return const DesktopLayout();
}
},
);
}
}
class MobileLayout extends StatelessWidget {
const MobileLayout({super.key});
@override
Widget build(BuildContext context) {
return const Center(child: Text('Mobile'));
}
}
class TabletLayout extends StatelessWidget {
const TabletLayout({super.key});
@override
Widget build(BuildContext context) {
return const Center(child: Text('Tablet'));
}
}
class DesktopLayout extends StatelessWidget {
const DesktopLayout({super.key});
@override
Widget build(BuildContext context) {
return const Center(child: Text('Desktop'));
}
}
A common adaptive requirement is changing a horizontal layout into a vertical layout.
LayoutBuilder(
builder: (context, constraints) {
final isWide = constraints.maxWidth >= 700;
if (isWide) {
return const Row(
children: [
Expanded(child: ProfileCard()),
Expanded(child: DetailsCard()),
],
);
}
return const Column(
children: [
ProfileCard(),
DetailsCard(),
],
);
},
)
This approach is useful for profile pages, checkout screens, dashboards, settings pages, and product details.
Navigation is one of the most important parts of adaptive design. A narrow window may work well with bottom navigation, while a wider window can provide a navigation rail or sidebar.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const Scaffold(
bottomNavigationBar: NavigationBar(
destinations: [
NavigationDestination(
icon: Icon(Icons.home),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
body: Center(child: Text('Mobile Content')),
);
}
return const Scaffold(
body: Row(
children: [
NavigationRail(
destinations: [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon: Icon(Icons.person),
label: Text('Profile'),
),
],
selectedIndex: 0,
),
Expanded(
child: Center(
child: Text('Large Screen Content'),
),
),
],
),
);
},
)
This pattern allows navigation to change according to available space rather than forcing the same navigation structure onto every screen.
A classic large-screen pattern is a sidebar containing a list and a detail panel containing the selected item.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return Row(
children: [
SizedBox(
width: 320,
child: ContactList(),
),
const VerticalDivider(width: 1),
const Expanded(
child: ContactDetails(),
),
],
);
}
return const ContactList();
},
)
On a small screen, users can navigate from the list to the details page. On a larger screen, both areas can be visible at the same time.
Cards can change their width and arrangement according to the available space.
LayoutBuilder(
builder: (context, constraints) {
int columns;
if (constraints.maxWidth < 600) {
columns = 1;
} else if (constraints.maxWidth < 1000) {
columns = 2;
} else {
columns = 4;
}
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 1.3,
),
itemCount: 12,
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text('Card ${index + 1}'),
),
);
},
);
},
)
Instead of hard-coding only device categories, you can calculate how many columns can fit based on a desired minimum card width.
LayoutBuilder(
builder: (context, constraints) {
const minCardWidth = 220.0;
final columns =
(constraints.maxWidth / minCardWidth).floor().clamp(1, 6);
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 1.2,
),
itemCount: 20,
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text('Product ${index + 1}'),
),
);
},
);
},
)
This technique is useful when building product catalogs, dashboards, image galleries, and admin panels.
Forms should not become excessively wide on desktop screens or too cramped on phones.
LayoutBuilder(
builder: (context, constraints) {
final isWide = constraints.maxWidth > 700;
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 800,
),
child: Padding(
padding: const EdgeInsets.all(24),
child: isWide
? Row(
children: [
Expanded(child: NameField()),
const SizedBox(width: 16),
Expanded(child: EmailField()),
],
)
: Column(
children: [
NameField(),
const SizedBox(height: 16),
EmailField(),
],
),
),
),
);
},
)
The combination of ConstrainedBox, Center, and adaptive Row/Column layouts helps maintain readable forms on large screens.
Dashboards are excellent examples of adaptive UI because they contain cards, charts, tables, filters, and navigation.
LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth;
if (width < 600) {
return const Column(
children: [
StatsCard(),
ChartCard(),
RecentOrders(),
],
);
}
if (width < 1000) {
return const Column(
children: [
Row(
children: [
Expanded(child: StatsCard()),
Expanded(child: StatsCard()),
],
),
ChartCard(),
RecentOrders(),
],
);
}
return const Column(
children: [
Row(
children: [
Expanded(child: StatsCard()),
Expanded(child: StatsCard()),
Expanded(child: StatsCard()),
Expanded(child: StatsCard()),
],
),
Row(
children: [
Expanded(child: ChartCard()),
Expanded(child: RecentOrders()),
],
),
],
);
},
)
Expanded allows a child of a Row or Column to use available remaining space.
Row(
children: [
SizedBox(
width: 250,
child: Sidebar(),
),
const VerticalDivider(width: 1),
Expanded(
child: MainContent(),
),
],
)On large screens, the sidebar can retain a reasonable width while the main content expands into the remaining space.
Flexible is useful when a child can shrink when space becomes limited.
Row(
children: [
Flexible(
child: Text(
'This text can shrink when available space is limited.',
),
),
const SizedBox(width: 12),
const Icon(Icons.info),
],
)This can help prevent text overflow in adaptive layouts.
Adaptive design is not only about changing the overall layout. Text, padding, and spacing should also remain usable.
LayoutBuilder(
builder: (context, constraints) {
final padding = constraints.maxWidth < 600
? 16.0
: 32.0;
return Padding(
padding: EdgeInsets.all(padding),
child: const Text(
'Adaptive content',
),
);
},
)
Avoid making text extremely large or small only because the screen changes. Text should remain readable and respect accessibility settings.
Dialogs can become too wide on desktop screens. A maximum width can keep them readable.
Dialog(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 500,
),
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'Login',
style: TextStyle(fontSize: 24),
),
const SizedBox(height: 20),
TextField(
decoration: const InputDecoration(
labelText: 'Email',
),
),
const SizedBox(height: 12),
TextField(
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
),
),
],
),
),
),
)SafeArea prevents important content from being obscured by system UI such as status bars, display cutouts, and rounded screen corners.
Scaffold(
body: SafeArea(
child: YourAdaptiveContent(),
),
)Flutter's documentation recommends using SafeArea where content could otherwise be affected by display cutouts or system UI. Flutter SafeArea and MediaQuery Documentation
A common mistake is writing logic such as:
if (isPhone) {
// phone
} else if (isTablet) {
// tablet
}Instead, make decisions based on the available window or widget space.
For example:
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const SmallLayout();
}
return const LargeLayout();
},
)
This approach works better with resizable desktop windows, browser windows, multi-window environments, and different form factors. Flutter's adaptive design guidance specifically recommends avoiding hardware-type checks for layout decisions. Flutter Adaptive Design Best Practices
Do not assume that landscape always means tablet or desktop and portrait always means phone.
For example, a desktop browser window can be narrow and a tablet can be wide. Therefore, available width is usually more useful than orientation alone when deciding the layout structure.
LayoutBuilder(
builder: (context, constraints) {
final isWide = constraints.maxWidth > 700;
return isWide
? const WideLayout()
: const NarrowLayout();
},
)
A list-detail interface is common in email applications, contact applications, shopping applications, and admin systems.
class AdaptiveListDetail extends StatelessWidget {
const AdaptiveListDetail({super.key});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 700) {
return Row(
children: [
SizedBox(
width: 300,
child: ListView(
children: const [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
),
),
const VerticalDivider(width: 1),
const Expanded(
child: Center(
child: Text('Select an item'),
),
),
],
);
}
return ListView(
children: const [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
);
},
);
}
}
Flutter's adaptive layout tutorial demonstrates this general concept with a large-screen sidebar/detail layout and a navigation-based experience on smaller screens. View Flutter's Adaptive Layout Tutorial
When the same breakpoint logic is required in multiple places, a reusable widget can reduce duplication.
class ResponsiveBuilder extends StatelessWidget {
final Widget mobile;
final Widget tablet;
final Widget desktop;
const ResponsiveBuilder({
super.key,
required this.mobile,
required this.tablet,
required this.desktop,
});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return mobile;
}
if (constraints.maxWidth < 1000) {
return tablet;
}
return desktop;
},
);
}
}
ResponsiveBuilder(
mobile: const MobileDashboard(),
tablet: const TabletDashboard(),
desktop: const DesktopDashboard(),
)import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Adaptive Dashboard',
home: const AdaptiveDashboard(),
);
}
}
class AdaptiveDashboard extends StatelessWidget {
const AdaptiveDashboard({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Adaptive Dashboard'),
),
body: SafeArea(
child: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileDashboard();
}
if (constraints.maxWidth < 1000) {
return const TabletDashboard();
}
return const DesktopDashboard();
},
),
),
);
}
}
class MobileDashboard extends StatelessWidget {
const MobileDashboard({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
children: const [
DashboardCard(title: 'Users', value: '1,250'),
SizedBox(height: 16),
DashboardCard(title: 'Orders', value: '850'),
SizedBox(height: 16),
DashboardCard(title: 'Revenue', value: '₹75,000'),
],
);
}
}
class TabletDashboard extends StatelessWidget {
const TabletDashboard({super.key});
@override
Widget build(BuildContext context) {
return GridView.count(
padding: const EdgeInsets.all(24),
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
children: const [
DashboardCard(title: 'Users', value: '1,250'),
DashboardCard(title: 'Orders', value: '850'),
DashboardCard(title: 'Revenue', value: '₹75,000'),
DashboardCard(title: 'Pending', value: '42'),
],
);
}
}
class DesktopDashboard extends StatelessWidget {
const DesktopDashboard({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
const SizedBox(
width: 250,
child: ColoredBox(
color: Colors.black12,
child: Center(
child: Text('Sidebar'),
),
),
),
Expanded(
child: GridView.count(
padding: const EdgeInsets.all(32),
crossAxisCount: 4,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
children: const [
DashboardCard(title: 'Users', value: '1,250'),
DashboardCard(title: 'Orders', value: '850'),
DashboardCard(title: 'Revenue', value: '₹75,000'),
DashboardCard(title: 'Pending', value: '42'),
],
),
),
],
);
}
}
class DashboardCard extends StatelessWidget {
final String title;
final String value;
const DashboardCard({
super.key,
required this.title,
required this.value,
});
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
title,
style: const TextStyle(fontSize: 18),
),
const SizedBox(height: 10),
Text(
value,
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
}
}
class AdaptiveNavigationPage extends StatelessWidget {
const AdaptiveNavigationPage({super.key});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final isLarge = constraints.maxWidth >= 800;
return Scaffold(
body: Row(
children: [
if (isLarge)
const SizedBox(
width: 240,
child: NavigationPanel(),
),
Expanded(
child: Column(
children: [
if (!isLarge)
const MobileHeader(),
const Expanded(
child: MainContent(),
),
],
),
),
],
),
bottomNavigationBar:
isLarge ? null : const MobileNavigation(),
);
},
);
}
}
Images should be allowed to resize while maintaining their aspect ratio.
AspectRatio(
aspectRatio: 16 / 9,
child: Image.network(
'https://example.com/image.jpg',
fit: BoxFit.cover,
),
)For local assets:
Image.asset(
'assets/images/banner.png',
width: double.infinity,
fit: BoxFit.cover,
)On desktop screens, allowing a paragraph or form to occupy the entire screen can make content difficult to read.
Use ConstrainedBox or ConstrainedBox with a centered container.
Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 900,
),
child: Padding(
padding: const EdgeInsets.all(24),
child: Text(
'This content remains within a readable width.',
),
),
),
)LayoutBuilder(
builder: (context, constraints) {
final horizontalPadding =
constraints.maxWidth < 600 ? 16.0 : 32.0;
return Padding(
padding: EdgeInsets.symmetric(
horizontal: horizontalPadding,
),
child: const Text('Adaptive content'),
);
},
)
Wrap is useful when items should automatically move to another line when horizontal space is insufficient.
Wrap(
spacing: 12,
runSpacing: 12,
children: [
Chip(label: Text('Flutter')),
Chip(label: Text('Dart')),
Chip(label: Text('Firebase')),
Chip(label: Text('UI')),
Chip(label: Text('API')),
],
)This is useful for tags, filters, categories, action buttons, and responsive toolbars.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return Row(
children: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.menu),
),
const Expanded(
child: Text('Products'),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
),
],
);
}
return Row(
children: [
const Expanded(
child: Text(
'Products',
style: TextStyle(fontSize: 24),
),
),
ElevatedButton(
onPressed: () {},
child: const Text('Add Product'),
),
const SizedBox(width: 12),
OutlinedButton(
onPressed: () {},
child: const Text('Export'),
),
],
);
},
)
LayoutBuilder(
builder: (context, constraints) {
final wide = constraints.maxWidth > 750;
return wide
? Row(
children: [
Expanded(
child: ProductImage(),
),
Expanded(
child: ProductInformation(),
),
],
)
: Column(
children: [
ProductImage(),
ProductInformation(),
],
);
},
)
This pattern is useful for e-commerce applications where product images and information appear side-by-side on larger screens and vertically on smaller screens.
class AdaptiveLoginPage extends StatelessWidget {
const AdaptiveLoginPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 450,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const FlutterLogo(size: 80),
const SizedBox(height: 24),
TextField(
decoration: const InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
TextField(
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('Login'),
),
),
],
),
),
),
),
),
);
}
}
Container(
width: 1000,
child: YourWidget(),
)This can cause overflow on narrow screens.
ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 1000,
),
child: YourWidget(),
)Avoid making layout decisions based only on phone/tablet/desktop labels.
Screen orientation does not always represent the actual amount of space available to the application.
Use maximum widths and appropriate spacing for large displays.
Do not assume that every user uses the default text scale. Accessibility settings can affect layout.
Always test narrow widths and large text settings.
MediaQuery.sizeOf for application-window decisions.LayoutBuilder for local widget constraints.Expanded and Flexible instead of unnecessary fixed widths.Wrap for content that should flow onto multiple lines.ConstrainedBox to prevent excessive content width.SafeArea where content may overlap system UI.Flutter's adaptive design guidance recommends breaking complex widgets into smaller components, avoiding unnecessary orientation locks, avoiding hardware-type checks, and supporting a variety of input devices. Flutter Adaptive Design Best Practices
Adaptive layouts should be tested at multiple window sizes rather than only on one physical device.
MediaQuery or LayoutBuilder.| Concept | Purpose |
|---|---|
| Adaptive Layout | Changes UI structure according to available space. |
| Responsive Design | Fits UI elements into available space. |
| MediaQuery.sizeOf | Gets the size of the application's window. |
| LayoutBuilder | Provides parent constraints to a widget. |
| BoxConstraints | Defines minimum and maximum width/height constraints. |
| Breakpoint | Point at which the layout changes. |
| Expanded | Uses available remaining space. |
| Flexible | Allows a child to flex within available space. |
| Wrap | Moves children onto additional lines when needed. |
| ConstrainedBox | Limits or defines layout constraints. |
| SafeArea | Protects content from system UI and display cutouts. |
MediaQuery.sizeOf is useful for application-window-level decisions.LayoutBuilder is useful for local layout decisions based on parent constraints.Expanded, Flexible, Wrap, and ConstrainedBox are useful for flexible layouts.ResponsiveBuilder widget.For structured Flutter learning, practical development, and course guidance, explore the JustAcademy Flutter Training Course.
You can also register for a course demo through the JustAcademy Flutter Course Demo Registration page.
Creating adaptive layouts is an essential Flutter skill for building applications that work well across phones, tablets, desktops, browsers, resizable windows, and different form factors. The key is to design around the space available to the application instead of relying on device names. Use MediaQuery.sizeOf when you need application-window information and LayoutBuilder when a widget needs to adapt to the constraints provided by its parent. Combine these tools with flexible widgets such as Expanded, Flexible, Wrap, GridView, ConstrainedBox, and SafeArea to create robust and maintainable Flutter interfaces.
